<template>
  <div class="body" :class="[['About','WorkList'].includes(routeName)&&'body-black']">
  <f-nav ref="nav" v-if="$route.meta.nav" :fixed="fixed"/>
  <router-view v-slot="{ Component }" v-if="isRouterAlive">
    <!-- mode="out-in" appear -->
    <transition :name="$route.meta.transition || 'fade'" 
    >
      <component :is="Component" />
    </transition>
  </router-view>
  <f-footer v-if="$route.meta.footer" />
</div>
</template>

<script>
import { useStore } from "vuex";
import { onMounted, ref, provide, nextTick, watch } from "vue";
import { useRoute } from "vue-router";
// 刷新
const onReload = ()=>{
  const isRouterAlive = ref(true)
  const reload = async () => {
    isRouterAlive.value = false
    await nextTick()
    isRouterAlive.value = true
  }
  return { isRouterAlive, reload}
}

export default {
  name: 'App',
  setup(){
    const routeName = ref('')
    const route = useRoute();
    const store = useStore();
    const { isRouterAlive, reload } = onReload()
    provide('reload', reload)

    const fixed = ref(false)
    const setNavFixed = status => fixed.value = status
    provide('setNavFixed', setNavFixed)

    watch(
      () => route.name,
      (_new) => {
        routeName.value = _new
      },
      {
        immediate: true,
      }
    );

    //初始化app主题
    store.dispatch("common/setTheme");
    onMounted(()=>{
      document.dispatchEvent(new Event('render-event'))
    })
    return {
      fixed,
      routeName,
      isRouterAlive
    }
  }
}
</script>

<style lang="less">
@import "./assets/css/common.less";
@import "./assets/css/router.less";
@keyframes moFadeIn{
  0%{opacity:0;}
  to{opacity:1;}
}
.myFadeIn{animation-name:myFadeIn}
@keyframes moFadeOut{
  0%{opacity:1;}
  to{opacity:0;}
}
.myFadeOut{
  animation-name:myFadeOut
}
.body{
  min-height: 100vh;
  transition: background-color .3s linear;
}
.body-black{
  background-color: #000;
  color: #fff;
}
</style>
